<template>
  <div class="audio-play">
<!--    <audio :src="props.audioSrc" ref="audio"></audio>-->
    <div class="left">
        <div class="timer">{{timeShow}}/{{timeTotal}}</div>
        <div class="speed" @click="changeSpeed">
            <div class="text">倍速：<span>{{rate}}X</span></div>
            <ul v-if="isChangeSpeed">
                <li @click="setRate(0.5)">0.5x</li>
                <li @click="setRate(1)">1.0x</li>
                <li @click="setRate(1.5)">1.5x</li>
                <li @click="setRate(2)">2.0x</li>
            </ul>
        </div>
        <div class="sound"  @click="soundClick">
<!--            <img :src="isSound? soundSrc : notSoundSrc" alt="" srcset="">-->
            <svg-icon
                :name="`icon-${isSound? 'soundSrc' : 'notSoundSrc'}`"
                class-name="icon-sound"
            ></svg-icon>
        </div>
    </div>
    <div class="center">
        <div class="common forward" @click="back">
<!--            <img :src="backSrc" alt="" srcset="">-->
            <svg-icon
                :name="`icon-backSrc`"
                class-name="icon-forward"
            ></svg-icon>
        </div>
        <div class="common play" @click="play">
<!--            <img :src="isPlay ? playSrc : pauseSrc" alt="" srcset="">-->
            <svg-icon
                :name="`icon-${isPlay? 'playSrc' : 'pauseSrc'}`"
                :class-name="`icon-${isPlay? 'playSrc' : 'pauseSrc'}`"
            ></svg-icon>
        </div>
        <div class="common forward" @click="forward">
<!--            <img :src="forwardSrc" alt="" srcset="">-->
            <svg-icon
                :name="`icon-forwardSrc`"
                class-name="icon-forward"
            ></svg-icon>
        </div>
    </div>
    <div class="right">
      <t-tooltip content="下载录音">
        <div class="img" @click="download" v-permission="['result:download:text']">
<!--            <img :src="downloadSrc" alt="" srcset="">-->
          <svg-icon
              :name="`icon-downloadSrc`"
              class-name="icon-down"
          ></svg-icon>
        </div>
      </t-tooltip>
      <t-tooltip content="下载文本" v-if="store.resultType !== 2">
        <div class="img" @click="transfer" v-permission="['result:download:audio']">
          <svg-icon
              :name="`icon-transferSrc`"
              class-name="icon-img"
          ></svg-icon>
        </div>
      </t-tooltip>
<!--      人工质检不可点击-->
<!--      <t-tooltip content="下载文本" v-if="store.resultType === 2">-->
      <div class="img dis_click" v-if="store.resultType === 2" v-permission="['result:download:audio']">
        <svg-icon
            :name="`icon-transferSrc`"
            class-name="icon-img"
        ></svg-icon>
      </div>
<!--      </t-tooltip>-->

<!--      人工质检不可点击-->
      <t-tooltip content="话者分离" v-if="store.resultType !== 2">
        <div class="img" @click="separate" v-permission="['result:reload']">
          <svg-icon
              :name="`icon-separateSrc`"
              class-name="icon-img"
          ></svg-icon>
        </div>
      </t-tooltip>
<!--      <t-tooltip content="话者分离">-->
        <div class="img dis_click" v-if="store.resultType === 2" v-permission="['result:reload']">
          <svg-icon
              :name="`icon-separateSrc`"
              class-name="icon-img"
          ></svg-icon>
        </div>
<!--      </t-tooltip>-->
    </div>
  </div>
</template>

<script setup>
import {ref, watch, inject} from 'vue'
import soundSrc from '@/assets/file/svg/result/sound.svg'
import notSoundSrc from '@/assets/file/svg/result/not_sound.svg'
import forwardSrc from '@/assets/file/svg/result/forward.svg'
import playSrc from '@/assets/file/svg/result/play.svg'
import pauseSrc from '@/assets/file/svg/result/pause.svg'
import backSrc from '@/assets/file/svg/result/back.svg'
import downloadSrc from '@/assets/file/svg/result/download.svg'
import separateSrc from '@/assets/file/svg/result/separate.svg'
import transferSrc from '@/assets/file/svg/result/transfer.svg'
import dayjs from 'dayjs'
import duration from "dayjs/plugin/duration";
import {downloadText, resultDownload, resultReload} from "../../../api/qualityResult";
dayjs.extend(duration);

import { usePageStore } from '@/pinia/page.js'
import {MessagePlugin} from "tdesign-vue-next";
import {timeToMillisecond, timeToSecond} from "../../../utils/tools";
const store = usePageStore()
const resetPage = inject('getDetailData')

const props = defineProps({
  audioSrc:String,
  time: Number
})

const emit = defineEmits(['play', 'forward', 'back', 'setVolume'])

watch(() => props.time,
      (newValue, oldValue) => {
        timeTotal.value = dayjs.duration(Math.ceil(newValue), 'seconds').format('HH:mm:ss')
      }
)

//定义子组件的事件
const audio = ref(null)

const timer = ref(null)
const timeShow = ref('00:00:00')
const timeTotal = ref('00:00:00')
const rate = ref('1.0')

//选择播放倍率
const isChangeSpeed = ref(false)
const changeSpeed = () => {
    isChangeSpeed.value = !isChangeSpeed.value
}

//声音打开或者关闭
const isSound = ref(true)
const soundClick = () => {
  isSound.value = !isSound.value
  let volume = isSound.value ? 1 : 0
  emit('setVolume', volume)
}

//播放、快进、快退
const isPlay =  ref(false)
const play = () => {
  store.$patch({ isSinglePlay: false })
  isPlay.value = !isPlay.value
  emit('play', isPlay.value)
}

// 设置播放关闭状态
const setPlayStatus = (flag) => {
  isPlay.value = flag
}

defineExpose({
  setPlayStatus
})

//设置倍率
const setRate = (value) => {
    if(value === 1 || value === 2) {
        rate.value = value + '.0'
    } else {
        rate.value = value
    }
    emit('setRate', value)
}

const  forward = () => {
    emit('forward')
}

const back = () => {
    emit('back')
}

//右侧下载相关
const download = () => {
  resultDownload([ store.currentDetailId ]).then(res => {
    console.log('下载录音',res)
    if(res.code === 0 && res.data.length > 0) {
      res.data.forEach(item => {
        const a = document.createElement("a");
        a.href = item; //给a标签上的href属性加上地址
        document.body.appendChild(a); //将a标签新增到文档对象中
        a.click(); //调点击事件
        document.body.removeChild(a); // 一次性的，用完就删除a标签
      })
    }
  })
}
const transfer = () => {
    console.log('transfer');
  downloadText(store.currentDetailId).then(res => {
    console.log('text', res)
    //返回的是一个二进制文件流 ，不能直接使用，需要设置responseType:blob
    const url = URL.createObjectURL(res); //把blob对象转成一个url
    //创建一个a标签
    const a = document.createElement('a');
    a.href = url; //给a标签上的href属性加上地址
    a.download = "录音对话内容.text" //下载名称
    document.body.appendChild(a); //将a标签新增到文档对象中
    a.click(); //调点击事件
    document.body.removeChild(a); // 一次性的，用完就删除a标签
  })
}
const separate = () => {
  let data = {
    type: 1,
    ids: [ store.currentDetailId ]
  }
  resultReload(data).then(res => {
    console.log('重新质检', res)
    if(res.code === 0) {
      // 刷新详情数据
      store.$patch({ isResetQuality: true })
      resetPage()
    }
  }).catch(error => {
    console.log(error)
  })
}
const millisecondTime = ref() // 当前播放时间(毫秒)

// 当前播放时间进度
watch(() => store.currentPlayTime, (newVal, oldVal) => {
  timeShow.value = dayjs.duration(Math.ceil(newVal), 'seconds').format('HH:mm:ss')
  if(timeShow.value === timeTotal.value) {
    isPlay.value = false
  }
})

// 单条内容播放
watch(() => store.audioPlayInterval.start, (newVal, oldVal) => {
  if(newVal) {
    let time = JSON.parse(JSON.stringify(store.audioPlayInterval))
    emit('playDuration', true, time)
    isPlay.value = true
  }
})

</script>

<style lang="scss" scoped>
  .audio-play{
    margin: 6px 21px 0;
    height: 21px;

    display: flex;
    justify-content: space-between;
    align-items: center;

    .left{
        width: 246px;
        height: 21px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .timer{
            width: 123px;
            font-size:12px;
            font-weight:600;
            text-align: center;
            line-height:22px;
            border-radius: 206px;
            background: rgba(241, 240, 245, 1);
            color: rgba(92, 91, 91, 1);
        }
        .speed{
            height: 21px;
            margin: 0 9px;
            font-size:12px;
            font-weight: 400;
            text-align: center;
            z-index: 99;
            .text{
                width: 84px;
                line-height:22px;
                border-radius:206px;
                background-color: #F1F0F5;
                font-size: 12px;
                font-weight: 400;
                color: rgba(92, 91, 91, 1);
                span{
                    color: rgba(30, 117, 254, 1);
                    cursor: pointer;
                }
            }
            ul{
                width: 42px;
                margin: 4px 0 0 42px;
                border-radius:3px;
                border: 0.5px solid #DCDCDC;
                background-color: #fff;
                opacity: 1;
                box-shadow: 0px 3px 3px -3px #bfbfbf, 0px 0px 0px -3px #bfbfbf, 0px 3px 3px -3px #bfbfbf;
                li{
                    width: 34px;
                    height: 28px;
                    margin: 4px 0 0 4px;
                    text-align: center;
                    line-height: 28px;
                    list-style: none;

                    &:hover{
                        color:#1E75FE;
                        background-color: #F0F6FF;
                        cursor: pointer;
                    }
                }
                &:last-child{
                    padding-bottom: 4px;
                }
            }
        }
        .sound{
            width: 21px;
            height: 21px;
            border-radius:258px;
            background: rgba(241, 240, 245, 1);
            text-align: center;
            line-height: 21px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            &:hover{
              background: rgba(226, 227, 227, 1);
            }
            &:active{
              background: rgba(206, 207, 209, 1);
            }
          .icon-sound {
            height: 11px;
            width: 11px;
          }
        }
    }

    .center{
        width: 87px;
        height: 21px;
        display: flex;
        justify-content: space-between;
        //align-items: center;

        .forward{
          display: flex;
          align-items: center;
          justify-content: center;
          background-color: #fff;
          &:hover{
            background: rgba(238, 238, 238, 1);
          }
          &:active{
            background: rgba(226, 226, 226, 1);
          }
          .icon-forward {
            height: 21px;
            width: 21px;
          }
        }

        .common{
            width: 21px;
            height: 21px;
            border-radius:258px;
            cursor: pointer;

            display: flex;
            justify-content: center;
            align-items: center;
        }

        .play{
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(30, 117, 254, 1);
            box-shadow: 3px 6px 14px  rgba(77, 77, 255, 0.2);
            &:hover{
              background: rgba(115, 169, 255, 1);
              box-shadow: 3px 6px 14px  rgba(77, 77, 255, 0.2);
            }

            &:active{
              background: rgba(69, 112, 255, 1);
              box-shadow: 3px 6px 14px  rgba(77, 77, 255, 0.2);
            }
          .icon-playSrc {
            display: inline-block;
            width: 5px;
            height: 6px;
          }
          .icon-pauseSrc {
            display: inline-block;
            width: 6px;
            height: 7px;
          }

        }
    }

    .right{
        width: 79px;
        height: 21px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        cursor: pointer;

        .img{
            width: 21px;
            height: 21px;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;

            &:hover{
              background: rgba(238, 238, 238, 1);
            }

            &:active{
              background: rgba(226, 226, 226, 1);
            }
          .icon-down {
            width: 11px;
            height: 11px;
          }
          .icon-img {
            width: 21px;
            height: 21px;
          }
        }
      .dis_click {
        cursor: not-allowed;
        &:hover{
          background: unset;
        }

        &:active{
          background: unset;
        }
      }
    }
  }
</style>
